<template>
  <div class="home">
    <div class="home-box">
      <Barchart :barData="barData" />
      <lines :datas="barData" />
    </div>
    <el-button @click="btnclick">默认按钮</el-button>
    <div>{{tagsdevice}}</div>
    <div class="test"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Barchart from "@/components/Barchart.vue";
import lines from "@/components/line.vue";
import { AppModule } from "@/store/modules/app";
@Component({
  components: {
    Barchart,
    lines,
  },
})
export default class Home extends Vue {
  public params: Object = {
    ee: 1,
  };
  public barData: Array<Number> = [];
  public getMock(): void {
    (this as any).$services
      .test({ params: this.params })
      .then((result: any) => {
        this.barData = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  get tagsdevice() {
    return AppModule.size;
  }

  // public set tagsdevice(val) {
  //   AppModule.SetSize(val);
  // }

  public btnclick(): void {
    (this as any).$services
      .test({ params: this.params })
      .then((result: object) => {
        // console.log("====================================");
        // console.log(result);
        // console.log("====================================");
      })
      .catch((err: object) => {});
    AppModule.SetSize(Math.ceil(Math.random() * 10 * 500).toString());
  }
  get lang() {
    return (this as any).$store.getters["App/getterSize"];
  }
  private created(): void {}
  private mounted(): void {
    this.getMock();
    // console.log();
  }
  private updated(): void {}
  private destroyed(): void {}
}
</script>

<style lang="scss" scoped>
.home-box {
  display: flex;
}
.test {
  width: 1rem;
  height: 1rem;
  background-color: indianred;
}
</style>